<template>
  <v-layout row justify-center>
    <v-dialog v-model="visible" persistent max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">编辑个人信息</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md class="pa-0">
            <v-layout wrap>
              <v-flex>
                <v-text-field label="昵称" v-model="nickname" maxlength="4"></v-text-field>
              </v-flex>
              <v-flex>
                性别
                <v-radio-group v-model="gender" row>
                  <v-radio
                      v-for="item in $const.sexList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                  ></v-radio>
                </v-radio-group>
              </v-flex>
              <v-flex>
                <v-text-field label="出生日期(输入19990101既可，不需要输入-)" v-model="birthday" v-mask="birthdayMask"></v-text-field>
              </v-flex>
              <v-flex>
                <v-flex>
                  <v-text-field label="所在地" v-model="location" maxlength="2"></v-text-field>
                </v-flex>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="visible = false">Close</v-btn>
          <v-btn color="blue darken-1" text @click="saveEdit">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script lang="ts">
  import {Component, Model, Vue} from 'vue-property-decorator'
  import User from "@/model/User"

  @Component
  export default class UserEdit extends Vue {
    @Model('change') user!: User

    visible: boolean = false
    nickname: string = this.user.nickname || ''
    gender: string = this.user.gender || '男'
    birthday: string = this.user.birthday || ''
    location: string = this.user.location || ''
    birthdayMask: string = '####-##-##'

    saveEdit() {
      if (this.birthday.length !== 10) {
        this.$error('出生日期格式错误，应为1999-01-01格式')
        return
      }
      this.$post('user/edit', {
        nickname: this.nickname,
        gender: this.gender,
        birthday: this.birthday,
        location: this.location
      }).then(res => {
        this.$emit('change', res.data)
        this.visible = false
      })
    }

    openDialog() {
      this.visible = true
    }
  }
</script>
